<template>
  <div class="information">
    <van-nav-bar :title="title" left-arrow @click-left="onClickLeft" />
    <van-cell-group>
      <van-cell
        v-for="(item, index) of list"
        :key="'item' + index"
        @click="onDetail(item)"
      >
        <template #title>
          <span class="circle"></span>
          <span class="custom-title">{{ index + 1 }}、{{ item.name }}</span>
        </template>
        <template #value>
          <img
            src="@/assets/images/person/next.png"
            alt=""
            class="custom-next"
          />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script setup>
import { ref, reactive } from "@vue/reactivity";
import { helpTList } from "@/api/user";
import { onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Toast } from "vant";
const router = useRouter();
const route = useRoute();
import { useI18n } from "vue-i18n";
const { t } = useI18n();
let title = ref("");
const data = reactive({
  name: "Tom",
});
const list = reactive([]);
onMounted(async () => {
  title.value = route.query.name;
  console.log(route.query);
  let res = await helpTList(route.query.id).catch((err) => {
    Toast(err);
  });
  console.log(res);
  Object.assign(list, res.data);
});
function onClickLeft() {
  history.back();
}
function onDetail() {
  //查看内容详情
  router.push({ path: "/helpdetail", query: { ...val } });
}
</script>

<style lang="less" scoped>
.information {
  .van-nav-bar__title.van-ellipsis {
    font-size: 18px;
  }
  .circle {
    display: inline-block;
    width: 5px;
    height: 5px;
    background: #ed008c;
    border-radius: 50%;
    position: relative;
    top: -2px;
  }
  .custom-title {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #454a4a;
    line-height: 14px;
    margin-left: 8px;
  }
  .custom-next {
    width: 8px;
    height: 13px;
    margin-left: 10px;
    position: relative;
    top: 2px;
  }
  :deep(.van-cell:after) {
    border-bottom: 1px solid #e6e6e6;
  }
}
</style>